<template>
  <div class="g-cur">
    <div class="wp">
      <NuxtLink to="/" class="a">创作中心</NuxtLink><span> / </span>
      <span class="s">创建作品</span>
    </div>
  </div>
  <div class="wp">
    <div class="createW">
      <!-- tab -->
      <ul class="ul-steps">
        <li class="act">
          <div class="idx">1</div>
          <div class="p">书籍信息</div>
        </li>
        <li class="act">
          <div class="idx">2</div>
          <div class="p">版权信息</div>
        </li>
        <li class="act">
          <div class="idx">3</div>
          <div class="p">打印信息</div>
        </li>
        <li class="act">
          <div class="idx">4</div>
          <div class="p">价格信息</div>
        </li>
      </ul>
      <!-- 内容 -->
      <div>
        <div class="price-info">
          <div class="top">
            <div class="tit">发行阶段数量以及价格<em>*</em></div>
            <div class="p">
              按照平台的发型阶段设置 完善对应阶段的数量以及价格信息即可
            </div>
          </div>
          <div class="bl-table">
            <table>
              <thead>
                <tr>
                  <th>发行层级</th>
                  <th>发行数量</th>
                  <th>发行价格（USD）</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>金浆果</td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.goldCount" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.goldPrice" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>银浆果</td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.silverCount" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.silverPrice" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>铜浆果</td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.copperCount" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.copperPrice" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>蓝莓</td>
                  <td>
                    <div class="inbox">
                      <div class="txt">不限量</div>
                    </div>
                  </td>
                  <td>
                    <div class="inbox">
                      <input type="number" v-model="formState.bluePrice" placeholder="请输入1-9999范围的数字" />
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          
          <div class="m-setb1">
            <div class="top">
              <div class="tit">购买设置<em>*</em></div>
            </div>
            <div class="itm" :class="{'act':isOpen}">
              <div class="tt" @click.stop="isOpen=true"><div class="dot"></div><div class="h3">开放购买</div></div>
            </div>
            <div class="itm" :class="{'act':!isOpen}">
              <div class="tt" @click.stop="isOpen=false"><div class="dot"></div><div class="h3">指定时间开放购买</div>
              <a-popover>
                <template #content>
                  <p>开放购买提示</p>
                </template>
                <QuestionCircleOutlined />
              </a-popover>
              </div>
              <a-date-picker show-time placeholder="请选择"  />
            </div>
          </div>
          <div class="m-readb1" :class="{'act':isRead}" @click.stop="isRead=!isRead">
            <span class="dot"></span>我已阅读并知晓 <NuxtLink to="" class="a">SilentBerry版权分销协议</NuxtLink>
          </div>
          <div class="bot-opts">
            <NuxtLink :to="'/printInfo?id='+id" class="btn">返回上一步</NuxtLink>
            <div @click="visible1=true" class="btn btn1">提交发布</div>
          </div>
        </div>
        <!-- 发布确定 -->
        <a-modal
          class="m-modall1"
          v-model:visible="visible1"
          centered
          :width="562"
          :footer="null"
        >
        
          <div class="m-tipsl styl1">
            <div class="tit">发布确定</div>
            <div class="tips">平台审核过 将会对作品进行上架 用户即可购买！平台审核过 将会对作品进行上架 用户即可购买！</div>
            <div class="btnbox">
              <div class="btn btn1" @click="visible1 = false">取消</div>
              <div class="btn" @click="save()">确定</div>
            </div>
          </div>
        </a-modal>
        <!-- 发布确定end -->
        <!-- 未保存的更改 -->
        <a-modal
          class="m-modall1"
          v-model:visible="visible2"
          centered
          :width="562"
          :footer="null"
        >
        
          <div class="m-tipsl styl1">
            <div class="tit">未保存的更改</div>
            <div class="tips">如果您离开当前编辑的页面，您的更改我们将为您保存到草稿箱 便于您下次再次编辑。</div>
            <div class="btnbox">
              <div class="btn btn1" @click="visible2 = false">取消</div>
              <div class="btn" @click="visible2 = false">确定离开</div>
            </div>
            <div class="tips t2">进行上架 用户即可购买！</div>
            <div class="btnbox">
              <div class="btn btn1" @click="visible2 = false">取消</div>
              <div class="btn" @click="visible2 = false">确定</div>
            </div>
          </div>
        </a-modal>
        <!-- 未保存的更改end -->
      </div>
    </div>
  </div>
</template> 

<script setup>
import { reactive, ref, onMounted } from 'vue';

import { PlusOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import request from '~/services/request'
import { message } from 'ant-design-vue';
import {RouterLink, RouterView, useRouter} from 'vue-router'
const router = useRouter()
const route = useRoute()  
const id = ref(route.query.id)

const isRead = ref(false);
const isOpen = ref(true);
// 弹窗
const visible1 = ref(false);
const visible2 = ref(false);
const formState=ref(
  {
  "goldCount": null,
  "goldPrice": null,
  "silverCount": null,
  "silverPrice": null,
  "copperCount":null,
  "copperPrice": null,
  "bluePrice": null,
  id:id.value,
}
)
function save(){
  for (const key in formState.value) {
    if (Object.hasOwnProperty.call(formState.value, key)) {
      if (!formState.value[key]) {
        message.error({
          content: () => '数量价格为必填项！',
          class: 'custom-class',
          style: {
            marginTop: '20vh',
          },
        });
        return false;
      }
    }
  }
  formState.value.goldPrice=parseFloat(formState.value.goldPrice).toFixed(2)
  formState.value.silverPrice=parseFloat(formState.value.silverPrice).toFixed(2)
  formState.value.copperPrice=parseFloat(formState.value.copperPrice).toFixed(2)
  formState.value.bluePrice=parseFloat(formState.value.bluePrice).toFixed(2)
  if(formState.value.id2){
    request.patch_books_id_price(formState.value).then(res=>{
    router.push('/myWorks')
    visible1 = false
  })
  }else{
    request.post_books_id_price(formState.value).then(res=>{
    router.push('/myWorks')
    visible1 = false
  })
  }
}
onMounted(() => {
  request.get_books_my_by_id({id:id.value}).then(res=>{
    if(res.price){
      for (const key in formState.value) {
          if (Object.hasOwnProperty.call(formState.value, key)) {
              formState.value[key] = res.price[key];
          }
        }
        formState.value.id1=id.value
        formState.value.id2=res.price.id
      }
  })
  //visible1.value = true;
 // visible2.value = true;
})
</script>

<style>
</style>